// 导入WhatsApp处理器模块
import { init, initDashboardButton } from '../utils/whatsappHandler';

// 初始化WhatsApp处理器
document.addEventListener('DOMContentLoaded', () => {
  // 方法1: 通过init函数初始化所有功能（包括状态看板按钮）
  init();
  
  // 方法2: 或者只初始化状态看板按钮功能
  // initDashboardButton();
  
  // 监听状态看板按钮点击事件
  document.addEventListener('dashboardButtonClicked', () => {
    console.log('状态看板按钮被点击了！');
    
    // 在这里添加你的自定义逻辑
    // 例如：打开状态看板弹窗
    openDashboardPanel();
  });
});

// 打开状态看板面板的示例函数
function openDashboardPanel() {
  // 创建状态看板面板
  const dashboardPanel = document.createElement('div');
  dashboardPanel.id = 'whatsapp-dashboard-panel';
  dashboardPanel.style.position = 'fixed';
  dashboardPanel.style.top = '0';
  dashboardPanel.style.right = '0';
  dashboardPanel.style.width = '300px';
  dashboardPanel.style.height = '100%';
  dashboardPanel.style.backgroundColor = '#fff';
  dashboardPanel.style.boxShadow = '-2px 0 5px rgba(0,0,0,0.2)';
  dashboardPanel.style.zIndex = '1000';
  dashboardPanel.style.padding = '20px';
  dashboardPanel.style.boxSizing = 'border-box';
  dashboardPanel.style.overflowY = 'auto';
  
  // 添加面板标题
  const panelTitle = document.createElement('h2');
  panelTitle.textContent = '状态看板';
  panelTitle.style.margin = '0 0 20px 0';
  panelTitle.style.padding = '0 0 10px 0';
  panelTitle.style.borderBottom = '1px solid #e0e0e0';
  dashboardPanel.appendChild(panelTitle);
  
  // 添加关闭按钮
  const closeButton = document.createElement('button');
  closeButton.textContent = '关闭';
  closeButton.style.position = 'absolute';
  closeButton.style.top = '20px';
  closeButton.style.right = '20px';
  closeButton.style.padding = '5px 10px';
  closeButton.style.border = 'none';
  closeButton.style.backgroundColor = '#f0f0f0';
  closeButton.style.borderRadius = '4px';
  closeButton.style.cursor = 'pointer';
  closeButton.onclick = () => {
    document.body.removeChild(dashboardPanel);
  };
  dashboardPanel.appendChild(closeButton);
  
  // 添加一些示例内容
  const content = document.createElement('div');
  content.innerHTML = `
    <p>这里是状态看板的内容区域。你可以在这里添加任何你想要的内容，例如：</p>
    <ul>
      <li>用户统计信息</li>
      <li>消息统计</li>
      <li>活跃状态</li>
      <li>系统通知</li>
    </ul>
    <p>这只是一个示例面板，你可以根据需要自定义它的外观和功能。</p>
  `;
  dashboardPanel.appendChild(content);
  
  // 将面板添加到页面
  document.body.appendChild(dashboardPanel);
} 